<template>
  <div class="playBar">
    <!-- 控制锁住的界面小UI -->
    <div class="bold">
      <div class="boldBtn">
        <i class="iconfont icon-lock"></i>
      </div>
    </div>
    <ProgressLine></ProgressLine>
    <!-- 具体播放功能 -->
    <div class="audioCon">
      <audio src=""></audio>
    </div>
    <!-- 播放组件其他结构 -->
    <el-row class="playBarInside">
      <el-col :span="7" class="playBar">
        <router-link :to="{path: '/song'}">
          <!-- bar图片 -->
          <el-image class="barCoverImg">
            <div slot="placeholder" class="imgSlot">
              <i class="iconfont icon-placeholder"></i>
            </div>
          </el-image>
          <!-- bar 作者与歌名 -->
          <div class="barName">
            <router-link :to="{path: '/song'}" class="songName">
              歌曲名
            </router-link>
            <p>
              <router-link :to="{path: '/singer'}" class="singerAuthor">作者名</router-link>
            </p>
          </div>
          <!--时间控制 -->
          <div class="barTime">
            <span>00:10</span>/03:42
          </div>
        </router-link>
      </el-col>
      <!-- 播放器暂停播放 上下一曲 -->
      <el-col :span="9" class="playBarCenter">
        <div class="barControl">
          <i class="iconfont icon-audio-prev" title="上一首"></i>
          <i></i>
          <i class="iconfont icon-audio-next" title="下一首"></i>
        </div>
      </el-col>
      <!-- 播放器微操作界面 -->
      <el-col :span="8" class="playBarInterface">
        <div class="barOper">
          <div class="volumeMain">
            <i title="音量"></i>
            <ProgressLine />
          </div>
          <i class="iconfont"></i>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ProgressLine from '../common/ProgressLine'
export default {
  name: 'SongPlayBar',
  components: {
    ProgressLine,
  
  }
}
</script>

<style lang='less' scoped>
.playBar{
  position: fixed;
  bottom: 40px;
  left: -10px;
}
</style>
